<template>
  <div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <Row>
      <Col offset="1" span="11">
      <Card>
        <div id="chart_emotion_index_day" style="width: 100% ;height: 400px;"></div>
      </Card>
      </Col>
      <Col span="11">
      <Card>
        <div id="chart_emotion_distribution_day" style="width: 100% ;height: 400px;"></div>
      </Card>
      </Col>
    </Row>
    <Row>
      <Col offset="1" span="11">
      <Card>
        <div id="chart_emotion_index_month" style="width: 100% ;height: 400px;"></div>
        </Card>
      </Col>
      <Col span="11">
      <Card>
        <div id="chart_emotion_distribution_month" style="width: 100% ;height: 400px;"></div>
        </Card>
      </Col>
    </Row>
    
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  name: "Emotion",
  data() {
    return {
      chart_emotion_index_day: "",
      chart_emotion_distribution_day: "",
      chart_emotion_index_month: "",
      chart_emotion_distribution_month: "",
    };
  },
  methods: {
    initChart() {
      //初始化本月情绪指数折线图
      this.chart_emotion_index_month = echarts.init(
        document.getElementById("chart_emotion_index_month")
      );
      this.chart_emotion_index_month.setOption({
        title: {
          text: "全站用户本月情绪指数",
        },
        tooltip: {},
        xAxis: {
          data: [],
        },
        yAxis: {},
        series: [
          {
            type: "line",
            data: [],
          },
        ],
      });
      //初始化本月情绪分布图
      this.chart_emotion_distribution_month = echarts.init(
        document.getElementById("chart_emotion_distribution_month")
      );
      this.chart_emotion_distribution_month.setOption({
        title: {
          text: "全站用户本月情绪分布图",
        },
        series: [
          {
            type: "pie",
            data: [],
          },
        ],
      });
      //初始化本月情绪指数折线图
       this.chart_emotion_index_day = echarts.init(
        document.getElementById("chart_emotion_index_day")
      );
      this.chart_emotion_index_day.setOption({
        title: {
          text: "全站用户今日情绪指数",
        },
        tooltip: {},
        xAxis: {
          data: [],
        },
        yAxis: {},
        series: [
          {
            type: "line",
            data: [],
          },
        ],
      });
      //初始化本日情绪分布图
      this.chart_emotion_distribution_day = echarts.init(
        document.getElementById("chart_emotion_distribution_day")
      );
      this.chart_emotion_distribution_day.setOption({
        title: {
          text: "全站用户今日情绪分布图",
        },
        series: [
          {
            type: "pie",
            data: [],
          },
        ],
      });
    },
    
  },
  mounted() {
    this.$nextTick(function () {
      this.initChart();
    });
  },
};
</script>
<style scoped>

</style>
